<style lang="less">
  #div_truck_load_earnest {
    p {
      margin-top: 0px;
      margin-bottom: 0px;
    }
  }
</style>

<template>
  <div id="div_truck_load_earnest">
    <el-row class="f-mt f-wa f-mb10">
      <el-col :span="24">
        <div>
          <el-menu :default-active="defaultStatus" class="el-menu-demo" mode="horizontal"
                   @select="statusSelect"
                   v-model="status">
            <el-menu-item index="false">
              未退款
            </el-menu-item>
            <el-menu-item index="true">
              已退款
            </el-menu-item>
          </el-menu>
        </div>
      </el-col>
      <el-col :span="24">
        <ue-search-bar ref="ueSearchBar" v-model="searchForm" :data="querys" label-width="120px">
        </ue-search-bar>
      </el-col>
      <el-col :span="24">
        <el-button type="primary" class="f-wa" @click="exportTruckLoadEarnest">导出
        </el-button>
        <el-button type="primary" class="f-wa f-fr f-ml10 f-mr20" @click="$refs.ueSearchBar.reset()">重置</el-button>
        <el-button type="primary" class="f-wa f-fr f-ml10" @click="findTruckLoadManagesByFilters">查询</el-button>
      </el-col>
    </el-row>
    <el-table :data="truckLoadManages" border style="width: 100%">
      <el-table-column prop="truckLoadNumber" label="订单编号" width="150">
        <template slot-scope="scope">
          <p style="color: #409eff" @click="modifyTruckLoadDialogClick(scope.row,true)">
            {{scope.row.truckLoadNumber}}</p>
          <p>{{scope.row.createTypeName}}</p>
        </template>
      </el-table-column>
      <el-table-column prop="memberUserName" label="客户信息" width="120">
        <template slot-scope="scope">
          <p>{{scope.row.memberUserName}}</p>
          <p>{{scope.row.memberPhone}}</p>
        </template>
      </el-table-column>
      <el-table-column prop="trucksLengthName" label="时间" width="180">
        <template slot-scope="scope">
          <p>下：{{scope.row.createDate}}</p>
          <p>发：{{scope.row.predictDepartCarDate.substring(0, 10)}} {{scope.row.predictDepartCarTime}}</p>
        </template>
      </el-table-column>
      <el-table-column prop="carInfo" label="车辆信息" width="120">
        <template slot-scope="scope">
          <p v-if="scope.row.createType===101027002">车长：{{scope.row.trucksLengthName}}米</p>
          <p v-if="scope.row.createType===101027002">车型：{{scope.row.trucksTypeName}}</p>
          <p v-if="scope.row.createType===101027001">车长：{{scope.row.truckLoadMessage.trucksLengthName}}米</p>
          <p v-if="scope.row.createType===101027001">车型：{{scope.row.truckLoadMessage.trucksTypeName}}</p>
          <p v-if="scope.row.createType===101027001">吨：{{scope.row.truckLoadMessage.weight}}</p>
          <p v-if="scope.row.createType===101027001">方：{{scope.row.truckLoadMessage.volume}}</p>
        </template>
      </el-table-column>
      <el-table-column prop="orderAmount" label="订单金额（元）" width="160">
        <template slot-scope="scope">
          <p>报价金额：<label style="color: red">{{scope.row.discountPrice}}</label></p>
          <p>议价金额：<label style="color: red">{{scope.row.bargainPrice}}</label></p>
          <p>付款方式：<label style="color: #409eff">{{scope.row.paymentTypeName}}</label></p>
        </template>
      </el-table-column>
      <el-table-column prop="originalPrice" label="其他费用" width="100">
        <template slot-scope="scope">
          <p>定金：{{scope.row.reserveTruckPrice}}</p>
          <p>保险：{{scope.row.supportServiceCost}}</p>
        </template>
      </el-table-column>
      <el-table-column prop="discount" label="货物信息" width="80">
        <template slot-scope="scope">
          <p>{{scope.row.cargoName}}</p>
          <p>{{scope.row.weight}}吨</p>
          <p>{{scope.row.volume}}方</p>
        </template>
      </el-table-column>
      <el-table-column prop="discountPrice" label="发货人信息">
        <template slot-scope="scope">
          <p>{{scope.row.startContactName}}</p>
          <p>{{scope.row.startContactPhone}}</p>
          <p>{{scope.row.startContactAddressDictNames + scope.row.startContactStreet}}</p>
        </template>
      </el-table-column>
      <el-table-column label="收货人信息">
        <template slot-scope="scope">
          <p>{{scope.row.endContactName}}</p>
          <p>{{scope.row.endContactPhone}}</p>
          <p>{{scope.row.endContactAddressDictNames + scope.row.endContactStreet}}</p>
        </template>
      </el-table-column>
      <el-table-column prop="assembleTypeName" label="装卸方式" width="80"></el-table-column>
      <el-table-column prop="compile" label="操作" width="280px">
        <template slot-scope="scope">
          <el-button type="primary" class="f-mt5" v-if="status==='false'"
                     @click="cancelAccountClick(scope.row)">销账
          </el-button>
          <el-button type="primary" class="f-mt5" v-if="status==='true'"
                     @click="selectCancelAccountDetails(scope.row)">退款详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="total,sizes,prev,pager,next,jumper"
      :total="total" style="float: right">
    </el-pagination>
    <div>
      <truck-load-earnest-dialog :truckLoadEarnest="truckLoadEarnest"
                                 v-on:isRefresh="findTruckLoadManagesByFilters"></truck-load-earnest-dialog>
      <truck-load-earnest-select-dialog
        :selectTruckLoadEarnest="selectTruckLoadEarnest"></truck-load-earnest-select-dialog>
    </div>
  </div>
</template>

<script>
import { objToFilter } from '../../lib/util.js';
import { searchTruckLoadOrders } from '../../api/truck-load/TruckLoadOrder.js';
import TruckLoadEarnestDialog from './TruckLoadEarnestDialog.vue';
import TruckLoadEarnestSelectDialog from './TruckLoadEarnestSelectDialog.vue';

export default {
  components: {
    TruckLoadEarnestDialog,
    TruckLoadEarnestSelectDialog
  },
  data () {
    return {
      fs: '',
      selectTruckLoadEarnest: {},
      truckLoadEarnest: {},
      truckLoadManages: [],
      status: 'false',
      defaultStatus: 'false',
      searchForm: {},
      currentPage: 1,
      pageSize: 10,
      total: 0
    };
  },

  methods: {
    exportTruckLoadEarnest () {
      location.href = '/api/v2.0/admin/order/truck_load_earnest_cancel_accounts/export?filters=' + this.fs;
    },
    selectCancelAccountDetails (row) {
      this.selectTruckLoadEarnest = JSON.stringify(Object.assign(row, {
        'isShow': true,
        'time': new Date().getTime()
      }));
    },
    // 销账
    cancelAccountClick (row) {
      this.truckLoadEarnest = JSON.stringify(Object.assign(row, {
        'isShow': true,
        'time': new Date().getTime()
      }));
    },
    statusSelect (val) {
      this.status = val;
      this.findTruckLoadManagesByFilters();
    },
    findTruckLoadManagesByFilters () {
      let filters = '';
      if (this.status === 'true') {
        filters = 'EQ_truckLoadCostDetail.costCode=101030002;EQ_truckLoadCostDetail.status=101003004;'; // 已销账
      } else {
        filters = 'EQ_truckLoadCostDetail.costCode=101030002;NOTEQ_truckLoadCostDetail.status=101003004;'; // 未销账
      }
      let ob = Object.assign({}, this.searchForm);
      filters += objToFilter(ob);
      this.fs = filters;
      this.searchTruckLoadManages(filters);
    },
    searchTruckLoadManages (filters) {
      console.log(filters);
      searchTruckLoadOrders({
        filters: filters,
        sorts: '+createDate',
        size: this.pageSize,
        page: this.currentPage
      }).then((res) => {
        this.truckLoadManages = res.data.detailModelList;
        this.currentPage = res.data.currPage;
        this.total = res.data.totalCount;
        this.pageSize = res.data.pageSize;
      });
    },
    // 每页几条操作
    handleSizeChange (val) {
      this.pageSize = val;
      this.findTruckLoadManagesByFilters();
    },
    // 第几页操作
    handleCurrentChange (val) {
      this.currentPage = val;
      this.findTruckLoadManagesByFilters();
    }
  },
  mounted () {
    this.findTruckLoadManagesByFilters();
  },
  computed: {
    btns () {
      return this.$store.state.btns[this.$route.path] || [];
    },
    querys () {
      return this.$store.state.querys[this.$route.path + '#default'] || [];
    }
  }
};
</script>
